<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>列表与超链接构建网页布局设计</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        /*大盒子的*/
        #wai{
            width: 80%;
            margin: auto;
        }       

        /*对标签的css样式的设定*/
        li{
            list-style: none;
            width: 100%;
            height: 100%;
        }
        .d1{
            width: 100%;
            height: 42px;
            background-color: rgba(238, 238, 238, 0.514);
            box-shadow: 0 0 5px rgb(0, 10, 100, 0.3);
            margin: 0 auto;
        }
        ul{
            position:relative;  
            display: flex;      
            justify-content: space-around;  
            width: 100%;
            height: 100%;
        }
        ol{
            width: 100%;
            background-color: rgba(238, 238, 238, 0.514);
            box-shadow: 1px 1px 3px rgb(0, 0, 0, 0.2);
            transform: scaleY(0);
            transform-origin: 50% 0;
            transition: all 0.6s;
        }

        /*链接*/
        a{
            display: block;
            text-decoration: none;
            color: black;
            width: 100%;
            height: 100%;
            line-height: 38px;
            text-align: center;

        }
        
        /*当鼠标悬停时显示的模式*/
        li:hover{
            background-color: rgba(11, 115, 146, 0.671);
        }
        .d1 ul li:hover ol{
            transform: scaleY(1);
        }

        /*对文字及图片的css样式设定*/
        #w1{
            margin-top: 30px;
            font-size:35px;
            font-family: "宋体";
            color: rgba(34, 83, 218, 0.801);
        }        
        .w2{
            margin-top: 25px;
            text-indent: 2em;
            font-family: "楷体";
            font-size: 23px;
        } 
        #p{
            margin-top: 40px;
            float: left;
            width: 400px;
            height: 300px;
        }

    </style>
</head>
<body>
    <div id="wai">
        <img src="1.jpg" width="100%" height=350px>
        <div class="d1">
            <ul>
                <li><a href="#">学校首页</a></li>
                <li><a href="#">学院首页</a></li>
                <li>
                    <a href="#">学院概况</a>
                    <ol>
                        <li><a href="#">学院简介</a></li>
                        <li><a href="#">学院领导</a></li>
                        <li><a href="#">师资状况</a></li>
                        <li><a href="#">机构设置</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">学院动态</a>
                    <ol><li><a href="#">学院新闻</a></li></ol>
                </li>
                <li>
                    <a href="#">教学工作</a>
                    <ol>
                        <li><a href="#">教务通知</a></li>
                        <li><a href="#">专业介绍</a></li>
                        <li><a href="#">规章制度</a></li>
                        <li><a href="#">文档下载</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">科研工作</a>
                   <ol>
                        <li><a href="#">科研通知</a></li>
                        <li><a href="#">科研平台</a></li>
                        <li><a href="#">学术交流</a></li>
                        <li><a href="#">学术建设</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">实验中心</a>
                    <ol>
                        <li><a href="#">信息技术综合实验中心</a></li>
                        <li><a href="#">基础实验中心</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">党建工作</a>
                   <ol>
                        <li><a href="#">组织框架</a></li>
                        <li><a href="#">要闻速递</a></li>
                        <li><a href="#">政策规章</a></li>
                        <li><a href="#">组织发展</a></li>
                        <li><a href="#">下载专区</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">学生工作</a>
                   <ol>
                        <li><a href="#">通知公告</a></li>
                        <li><a href="#">团学活动</a></li>
                        <li><a href="#">创新创业</a></li>
                        <li><a href="#">规章制度</a></li>
                        <li><a href="#">学子风采</a></li>
                        <li><a href="#">下载专区</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">招生就业</a>
                    <ol>
                        <li><a href="#">招生专栏</a></li>
                        <li><a href="#">就业专栏</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">第二学历</a>
                    <ol>
                        <li><a href="#">通知</a></li>
                        <li><a href="#">法规政策</a></li>
                        <li><a href="#">招生宣传</a></li>
                        <li><a href="#">资源下载</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">校友之家</a>
                    <ol>
                        <li><a href="#">校友动态</a></li>
                        <li><a href="#">校友风采</a></li>
                        <li><a href="#">校友走访</a></li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="d2">
            <p id="w1">专业介绍</p>
            <hr color="black">
            <img id="p" src="敬信楼.jpg" width="600ox" height="400px">
            <p class="w2">徐州工程学院坐落于国家“一带一路”重要节点城市、国家历史文化名城、淮海经济区中心城市——江苏徐州。学校办学肇始于1959年，2002年经教育部批准为全日制普通本科院校。</p>
            <p class="w2">
                信息工程学院（大数据学院）现有计算机科学与技术、软件工程、数据科学与大数据技术、电子信息工程、电子信息科学与技术、人工智能6个本科专业。
                其中，计算机科学与技术专业为江苏省重点专业、江苏省一流本科专业，入选教育部“卓越工程师教育培养计划”，并已通过中国工程教育专业认证现场考查。学院连续15年实施江苏省服务外包人才嵌入式培养项目，产教融合、协同育人培养模式成效显著，人才培养质量不断提升。现有全日制在校本科生1653人，教职工90人，其中，专任教师65人。
                学院拥有江苏省智慧工业控制技术重点建设实验室、江苏省智慧物流云平台技术工程实验室和淮海经济区网络安全与信息化产业学院。
                拥有国家级工程实践教育基地2个、江苏省工程实践教育示范中心1个。与企业共建信息安全、物联网、移动应用开发、智能机器人等多个校内大学生实践创新工作室。
                学院秉承“更新、更快、更大、更实”的发展理念，坚持走“学科交融、理实一体、开放合作、协同育人”的建设之路，注重对学生工程实践能力与创新创业能力的培养。
                近年来，学生在ACM程序设计大赛、电子设计大赛、信息安全竞赛等学科竞赛中获数十项国家级奖项。
            </p>
        </div>
    </div>
</body>
</html>